<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn1">设置sessionStorage</button>
    <button class="btn2">获取sessionStorage</button>
    <button class="btn3">删除sessionStorage</button>
    <button class="btn4">删除全部sessionStorage</button>
    <script>
      // localstorage：只要不主动清除 一直存在  sessionStorage :时效性 ，在浏览器关闭的时候自动销毁；

      // sessionStorage是关闭浏览器选项卡的时候自动销毁 ； session 只能大退浏览器的时候销毁；
      // 1.设置sessionStorage
      document.querySelector(".btn1").onclick = function () {
        sessionStorage.setItem("myname", "李四");
      };

      // 2.获取
      document.querySelector(".btn2").onclick = function () {
        console.log(sessionStorage.getItem("myname"));
      };

      // 3.删除指定
      document.querySelector(".btn3").onclick = function () {
        sessionStorage.removeItem("myname");
      };
      // 4.删除所有
      document.querySelector(".btn4").onclick = function () {
        sessionStorage.clear();
      };
    </script>
  </body>
</html>
